Add `replyToId` for "IM back", "post back", and "message back" originated from Web Chat by compulim · Pull Request #5871 · microsoft/BotFramework-WebChat

William Wong (compulim) · 2026-10-09T19:20:55Z

Related to #5862.

Changelog Entry

Added

Rich cards: added fill-in of replyToId for "post back" card actions, in PR #5871, by @compulim

Description

When clicking on a card action of type postBack, the outgoing activity will now contain replyToId to reference which activity it was replying to.

Design

Specific Changes

Added replyToId to
- All card action middleware
- Hook:
  - useSendMessage for IM back
  - useSendMessageaBack for message back
  - useSendPostBack for post back
  - usePerformCardAction for all card action
Added InferReactProps<T> for better representing Valibot prop types
Changed "stable screenshot" requirement from 2 to 5, each test run added ~300 ms to trade for less flakiness
Delayed some tests to show tooltip before taking screenshot

I have added tests and executed them locally
I have updated CHANGELOG.md
I have updated documentation

Review Checklist

This section is for contributors to review your work.

~~Accessibility reviewed (tab order, content readability, alt text, color contrast)~~
~~Browser and platform compatibilities reviewed~~
~~CSS styles reviewed (minimal rules, no z-index)~~
Documents reviewed (docs, samples, live demo)
~~Internationalization reviewed (strings, unit formatting)~~
~~package.json and package-lock.json reviewed~~
~~Security reviewed (no data URIs, check for nonce leak)~~
Tests reviewed (coverage, legitimacy)

Copilot

🟡 Changes recommended

Optional audio content, stricter action validation, incorrect test coverage, and inaccurate API documentation need correction.

8 open findings

What changed in this PR

Adds originating activity IDs to rich-card postback activities and introduces readonly Valibot-derived React prop types.

Changes:

Propagates replyToId through card rendering and postback handling.
Migrates card wrappers from JavaScript/PropTypes to validated TypeScript.
Adds API documentation, changelog entries, and HTML integration tests.

File	Description
`packages/react-valibot/src/InferReactProps.ts`	Adds readonly prop inference.
`packages/react-valibot/src/index.ts`	Exports the new type.
`packages/bundle/src/adaptiveCards/createAdaptiveCardsAttachmentMiddleware.tsx`	Supplies originating activity IDs.
`packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/VideoCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/VideoCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/ThumbnailCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/SignInCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/SignInCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/SignInCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/ReceiptCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/ReceiptCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/ReceiptCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/private/directLineSchema.ts`	Uses the extracted action schema.
`packages/bundle/src/adaptiveCards/Attachment/private/directLineCardActionSchema.ts`	Adds action validation.
`packages/bundle/src/adaptiveCards/Attachment/OAuthCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/OAuthCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/HeroCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/HeroCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/CommonCard.tsx`	Adds typed common-card rendering.
`packages/bundle/src/adaptiveCards/Attachment/CommonCard.js`	Removes legacy implementation.
`packages/bundle/src/adaptiveCards/Attachment/AudioCardContent.tsx`	Forwards `replyToId`.
`packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/AudioCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/AnimationCardContent.tsx`	Forwards IDs and autoplay state.
`packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.tsx`	Adds validated TSX wrapper.
`packages/bundle/src/adaptiveCards/Attachment/AnimationCardAttachment.js`	Removes legacy wrapper.
`packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardRenderer.tsx`	Uses the extracted action schema.
`packages/api/src/hooks/middleware/createDefaultCardActionMiddleware.ts`	Notes remaining reply handling.
`docs/HOOKS.md`	Documents hook arguments.
`docs/API.md`	Documents middleware context.
`CHANGELOG.md`	Records the feature.
`__tests__/html2/replyToId/cardAction/videoCard.html`	Tests video-card postbacks.
`__tests__/html2/replyToId/cardAction/thumbnailCard.html`	Tests thumbnail-card postbacks.
`__tests__/html2/replyToId/cardAction/signInCard.html`	Tests sign-in-card postbacks.
`__tests__/html2/replyToId/cardAction/receiptCard.html`	Tests receipt-card postbacks.
`__tests__/html2/replyToId/cardAction/oauthCard.html`	Tests OAuth-card postbacks.
`__tests__/html2/replyToId/cardAction/heroCard.html`	Tests hero-card postbacks.
`__tests__/html2/replyToId/cardAction/audioCard.html`	Intended to test audio cards.
`__tests__/html2/replyToId/cardAction/animationCard.html`	Tests animation-card postbacks.
`__tests__/html2/replyToId/cardAction/adaptiveCard.html`	Tests Adaptive Card submissions.
`__tests__/html2/hooks/useSendPostBack.text.html`	Tests textual postbacks.
`__tests__/html2/hooks/useSendPostBack.replyToId.html`	Tests hook-level reply IDs.
`__tests__/html2/hooks/usePerformCardAction.replyToId.html`	Tests middleware propagation.

🧠 Review effort: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Copilot

🟡 Changes recommended

Card-action validation introduces compatibility regressions, and the development harness does not honor the screenshot stabilization opt-out.

2 open findings

1 resolved since last review

Invalid readonly modifier on Iterable type

Previously missed (2)

In code that hasn't changed since last review

Tap action parsing strips supplied titles

packages/bundle/src/adaptiveCards/Attachment/private/directLineCardActionSchema.ts:146

The essence schemas use object() without presentation fields, so parsing a tap action now discards its supplied title. ThumbnailCardContent always parses images[].tap, then passes it to AdaptiveCardBuilder.addImage(), which uses that title for the image action. This loses the action label and, for submitted actions, the title passed to middleware. Preserve optional presentation fields on headless actions rather than stripping them.

Development harness ignores stable=false screenshot option

packages/test/harness/src/host/common/host/snapshot.js:18

The development harness ignores stable: false: createDevProxies.js:16 replaces this function with host/dev/hostOverrides/snapshot.js, which always calls takeStabilizedScreenshot(). The updated copy-button test therefore still waits for stabilization when run interactively and can miss the transient Copied state; continuously animated pages still time out despite the opt-out. Apply the same screenshot-selection logic in the development override.

🧠 Review effort: Balanced

Copilot

🟡 Changes recommended

Tap-action metadata is lost during parsing, and development screenshots ignore the new stability opt-out.

2 open findings

2 resolved since last review

🧠 Review effort: Balanced

Copilot

🔵 Needs a closer look

A dispatch-order regression remains, and the broader runtime-validation and screenshot changes require human regression verification.

1 open finding

Avoid yielding on omitted attachments to preserve synchronous dispatch · New

2 resolved since last review

🧠 Review effort: Balanced

Copilot

🔵 Needs a closer look

Cross-cutting validation, card rendering, and screenshot timing changes need human confirmation of browser integration results.

0 open findings

1 resolved since last review

Avoid yielding on omitted attachments to preserve synchronous dispatch

🧠 Review effort: Balanced

William Wong (compulim) requested a balanced review from Copilot October 9, 2026 21:55

Copilot started reviewing on behalf of William Wong (compulim) October 9, 2026 21:56

View session

William Wong (compulim) added 26 commits October 9, 2026 21:57

Add tests

9a1bec9

Add doc

97fc298

Add TODOs

ab97545

Add tests

7423d40

Add doc

5e2eab7

Add doc

cb043d5

Fix indent

63befa0

Add replyToId in hero card

c3ba32d

Hero card to export type

9ca8ae7

Add InferReactProps

84fe37c

Add animation card

96e65e7

Add rationale

af05465

Add audio card

d3ae1ba

Fix card action import

a60bc5c

Add OAuth card

1c6913c

Export prop types

a18a7dd

Add receipt card

344f475

Add sign-in card

6d92b9f

Add thumbnail card

24f7c67

Add video card

eb62084

Fix coalesce

6c15952

Export prop types

97c2fae

Add entry

65d4b69

Update entry

fe22b44

Add snapshots

83fe7ca

Add PR number

bf34055

William Wong (compulim) force-pushed the feat-postback-reply-to-id branch from 2feec1a to bf34055 Compare October 9, 2026 21:57

Copilot AI reviewed Oct 9, 2026

View reviewed changes

Copilot started reviewing on behalf of William Wong (compulim) October 14, 2026 23:27

View session

Copilot AI reviewed Oct 14, 2026

View reviewed changes

Comment thread packages/bundle/src/adaptiveCards/Attachment/private/directLineCardActionSchema.ts Outdated

William Wong (compulim) added 6 commits October 15, 2026 04:06

Allow nullish messageBack value

2060f25

Use unknown for messageBack value

634719b

Add wait for tooltip

1052162

Take screenshot immediately for copy button

076d605

Fix Prettier

8a5b019

Improve stability

55ce0f7

William Wong (compulim) requested a balanced review from Copilot October 15, 2026 08:23

Copilot started reviewing on behalf of William Wong (compulim) October 15, 2026 08:24

View session

Add entry

fad78b3

Copilot AI reviewed Oct 15, 2026

View reviewed changes

Comment thread packages/bundle/src/adaptiveCards/Attachment/private/directLineCardActionSchema.ts

Comment thread packages/test/harness/src/host/common/host/snapshot.js

Add { stable: false }

f222c82

William Wong (compulim) requested a balanced review from Copilot October 15, 2026 09:33

Copilot started reviewing on behalf of William Wong (compulim) October 15, 2026 09:41

View session

Copilot AI reviewed Oct 15, 2026

View reviewed changes

Comment thread packages/component/src/hooks/useSendMessage.ts Outdated

Preserve synchronicity

df7ed8c

William Wong (compulim) requested a balanced review from Copilot October 15, 2026 10:29

Copilot started reviewing on behalf of William Wong (compulim) October 15, 2026 10:30

View session

Copilot AI reviewed Oct 15, 2026

View reviewed changes

William Wong (compulim) changed the title ~~[WIP] Add replyToId for "IM back", "post back", and "message back" originated from Web Chat~~ Add replyToId for "IM back", "post back", and "message back" originated from Web Chat Oct 15, 2026

William Wong (compulim) marked this pull request as ready for review October 15, 2026 17:47

William Wong (compulim) requested review from Andy Brown (a-b-r-o-w-n), Chris Whitten (cwhitten), Srinaath Ravichandran (srinaath) and TJ Durnford (tdurnford) as code owners October 15, 2026 17:47

Eugene (OEvgeny) reviewed Oct 15, 2026

View reviewed changes

Comment thread packages/bundle/src/adaptiveCards/Attachment/VideoCardContent.tsx

Eugene (OEvgeny) approved these changes Oct 15, 2026

View reviewed changes

William Wong (compulim) merged commit 1f4e9bc into main Oct 15, 2026
33 checks passed

William Wong (compulim) deleted the feat-postback-reply-to-id branch October 15, 2026 23:19

Navigation Menu

Repository navigation

Add `replyToId` for "IM back", "post back", and "message back" originated from Web Chat - #5871

Add `replyToId` for "IM back", "post back", and "message back" originated from Web Chat#5871
William Wong (compulim) merged 80 commits into
mainfrom
feat-postback-reply-to-id

William Wong (compulim) commented Oct 9, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

William Wong (compulim) commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog Entry

Added

Description

Design

Specific Changes

Review Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

William Wong (compulim) commented Oct 9, 2026 •

edited

Loading